<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">产成品入库详情</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                <el-col :span="3" v-if="productStockDetailData.status == 0">
                    <el-button
                        class="btn-success width150"
                        type="primary"
                        @click="confirm()"
                    >一键入库</el-button>
                </el-col>
                <el-col :span="10" class="status-container">
                    <div class="status-item">
                        <span :class="{ 'active' : productStockDetailData.status == 0 }">待入库</span>
                        <span :class="{ 'active' : productStockDetailData.status == 1 }">已入库</span>
                        <span :class="{ 'active' : productStockDetailData.status == 2 }">待确认</span>
                    </div>
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>计划编码：</span>{{ productStockDetailData.planCode ? productStockDetailData.planCode : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>产品名称：</span>{{ productStockDetailData.productBasicName ? productStockDetailData.productBasicName : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>规格：</span>{{ productStockDetailData.specification ? productStockDetailData.specification : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>产品批号：</span>{{ productStockDetailData.batchNumber ? productStockDetailData.batchNumber : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>箱规：</span>{{ productStockDetailData.productSpace ? productStockDetailData.productSpace : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>生产序列号：</span>{{ productStockDetailData.productionSerialNumber ? productStockDetailData.productionSerialNumber : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>计划数量：</span>{{ productStockDetailData.planNum ? productStockDetailData.planNum : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>完成数量：</span>{{ productStockDetailData.endNum ? productStockDetailData.endNum : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>待入库：</span>{{ productStockDetailData.endNum ? productStockDetailData.endNum : '暂无' }}
                </el-col>
                <el-col :span="12">
                    <span>实际入库：</span>{{ productStockDetailData.storeNum ? productStockDetailData.storeNum : '暂无' }}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="12">
                    <span>入库仓库：</span>
                    <template v-if="productStockDetailData.status == 0">
                        <el-select v-model="productStockDetailData.warehouseId" style="width:50%;" placeholder="请选择" @change="onWarehouse" filterable>
                            <el-option
                                v-for="item in warehouseList"
                                :key="item.warehouseId"
                                :label="item.name"
                                :value="item.warehouseId"
                            >
                            </el-option>
                        </el-select>
                    </template>
                    <template v-else>
                        {{ productStockDetailData.warehouseName ? productStockDetailData.warehouseName : '暂无' }}
                    </template>
                </el-col>
                <el-col :span="12">
                    <span>状态：</span>
                    <font v-if="productStockDetailData.status == 0" style="color:#13C2C2">待入库</font>
                    <font v-if="productStockDetailData.status == 1" style="color:#52C41A">已入库</font>
                    <font v-if="productStockDetailData.status == 2" style="color:#13C2C2">待确认</font>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { detailProductStock, confirmProductStock } from "@/api/system/productStock/productStock"
import { queryWarehouse } from "@/api/system/warehouse/warehouse"
export default {
    name: "productStockDetail",
    data() {
        return {
            id: '',
            productStockDetailData: '',
            warehouseList: ''
        }
    },
    created() {
        this.id = this.$route.query.id
        this.getDetailData()
        this.getWarehouseList()
    },
    methods: {
        // 获取详情信息
        getDetailData() {
            detailProductStock(this.id).then(res => {
                // console.log(res)
                this.productStockDetailData = res.data
            })
        },
        // 获取仓库列表
        getWarehouseList(){
            queryWarehouse({openPosition: 1}).then(res => {
                if(res.code == 200){
                    this.warehouseList = res.data
                }
            })
        },
        // 选择仓库
        onWarehouse(val){
            let data = this.warehouseList.find(i => i.warehouseId == val)
            this.productStockDetailData.warehouseId = data.warehouseId
            this.productStockDetailData.warehouseName = data.name
        },
        // 标记完成
        confirm(){
            if(this.productStockDetailData.warehouseId == null){
                this.$modal.msgError('请选择仓库！')
            }else{
                this.$modal.confirm('是否确认一键入库？', '一键入库').then(() => {
                    this.$modal.loading("正在入库……")
                    confirmProductStock({id: this.id, warehouseId: this.productStockDetailData.warehouseId, warehouseName:this.productStockDetailData.warehouseName }).then(res => {
                        // console.log(res)
                        if(res.code == 200){
                            this.getDetailData()
                            this.$modal.closeLoading()
                            this.$modal.msgSuccess("操作成功")
                        }
                    })
                }).catch(() => {})
            }
        }
    }
}
</script>
